<template>
	<view class="activityDetails">
		<SRV-topbar title="业绩提现" :isLeft="true"></SRV-topbar>
        <view class="content">
            <view class="line"> 
                <view>当前业绩值：</view>
                <view class="yj" style="display: flex;">{{info.achievement}}
                <view class="con-but" type="default" @click="turnAll()"> 全部提现 </view>
                </view>
            </view>
            <view class="line">
                <view class="con-tiltle"> 提现数值： </view>
                <view>
                    <input class="con-ipnut" type="number" v-model="formData.money" placeholder="请输入数值" value="" @blur="calculationTotalMoney()"/>
                </view>
            </view>
            <view class="line"> 
                <view>手续费：</view>
                <view class="yj">￥{{procedures}}</view>
            </view>
            <view class="line"> 
                <view>实际到账金额：</view>
                <view class="yj">￥{{actual_money}}</view>
            </view>
            <view class="line">
                <view>提现到：</view>
                <view style="position: relative;">
                    <picker @change="bindPickerChange" :value="info.arrival_key" :range="info.arrival_list" range-key="itemName" style="padding-right: 28rpx;">
                        <view class="item">{{info.arrival_list[info.arrival_key].itemName}}</view>
                    </picker>
                    <view class="jt"></view>
                </view>
            </view>
            <view class="line">
                <textarea class="remark" placeholder-style="color:rgba(66,81,114,0.5);" value="" :placeholder="info.arrival_list[info.arrival_key].itemRemark" v-model="formData.arrival_val" />
            </view>
            <view class="line remarkHtml" v-html="info.ryz_remark"></view>
            <view class="but-box" :style="'height:' + bottomHeight + 'rpx;'">
                <view class="but" @click="apply()">预计3工作日内到账,确认提现</view>
            </view>
        </view>
	</view>
</template>

<script>
	var _self;
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				info: {
					achievement: 0,
					yellow_bean: 0,
					ryz_remark: '提示：业绩值满500元可申请提现，将收取5%手续费！',
					procedures_ratio: 0.05,
					arrival_list: [],
                    arrival_type: 1,
                    arrival_key: 0,
                    arrival_val: '',
				},
				procedures: '0.00',
                actual_money: '0.00',
				formData: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					money : 0,
					arrival_type: 1,
                    arrival_val: '',
				},
                bottomHeight: 110,
			}
		},
		methods: {
			getMain() {
				serve.request({
                    url: '/member/increase/withdraw',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                    },
                    v: '/v2'
                }).then(res => {
                    _self.info = res.data;
                    _self.formData.arrival_type = _self.info.arrival_type;
                    _self.formData.arrival_val = _self.info.arrival_val;
                });
			},
            bindPickerChange(e) {
                let key = e.target.value;
                _self.info.arrival_key = key;
                _self.formData.arrival_type = _self.info.arrival_list[key].itemId;
            },
			turnAll() {
				_self.formData.money = _self.info.achievement;
                _self.calculationTotalMoney();
			},
			apply() {
				if (_self.money == '' || Number(_self.money) < 0) {
					uni.showToast({
						title: '提现业绩值格式错误',
						icon: 'none'
					});
					return;
				}
				if(Number(_self.formData.money) > Number(_self.info.achievement)) {
					uni.showToast({
						title: '最大提现业绩值为：'+_self.info.achievement,
						icon: 'none'
					});
					return;
				}
                if(_self.formData.arrival_val == '') {
                    uni.showToast({
                    	title: _self.info.arrival_list[info.arrival_key].itemRemark,
                    	icon: 'none'
                    });
                    return;
                }
				serve.request({
						url: '/member/increase/add-withdraw',
						data: _self.formData,
                        v: '/v2'
					}).then(res => {
                        uni.showToast({
                        	title: res.message,
                        	icon: 'none',
                        	success: function() {
                                if (res.code == 200) {
                                    setTimeout(function() {
                                        uni.redirectTo({
                                            url:'/pages/my/withdrawDetails'
                                        });
                                    }, 2000);
                                }
                        	}
                        });
                        return ;
					});
			},
            numFilter(value) {
            	let tempVal = parseFloat(value).toFixed(3);
            	let realVal = tempVal.substring(0, tempVal.length - 1);
            	return realVal;
            },
            calculationTotalMoney() {
                console.info(_self.formData.money);
                _self.procedures = _self.numFilter(_self.formData.money * _self.info.procedures_ratio);
                _self.actual_money = _self.numFilter(_self.formData.money  - _self.procedures);
            },
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link);
			}
		},
		onLoad() {
            _self = this;
            if (uni.getSystemInfoSync().safeAreaInsets.top > 20) {
            	_self.bottomHeight = 150;
            }
		},
        onShow() {
            _self.getMain();
        },
		onPullDownRefresh() {
			_self.getMain();
		}
	}
</script>

<style scoped>
    .activityDetails {
        padding-bottom: 200rpx;
        font-size: 32rpx;
        color: #1e2022;
    }
    
    .line {
        line-height: 100rpx;
        border-bottom: 2rpx solid #ededed;
        display: flex;
        justify-content: space-between;
        padding: 0 36rpx;
    }
    .yj{
        color: #dd6161;
    }
    .con-ipnut{
        height: 70rpx;
        text-align: right;
        padding-right: 20rpx;
        color: #dd6161;
        line-height: 70rpx;
        font-size: 30rpx;
        background-color: #dedede;
        border-radius: 20rpx;
        padding-right: 20rpx;
        margin: 15rpx 0;
    }
    .con-but{
        font-size: 28rpx;
        color: #ffffff;
        padding: 8rpx 16rpx;
        background: #FFBC00;
        border-radius: 8rpx;
        height: 50rpx;
        line-height: 50rpx;
        margin: 15rpx 0 15rpx 20rpx;
    }
    .remark {
        background-color: #dedede;
        width: 100%;
        margin: 20rpx 0;
        padding: 10rpx;
    }
    .remarkHtml {
        line-height: 50rpx;
        padding: 20rpx 36rpx;
    }
    .but-box{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        background: #ffffff;
    }
    .but{
        background: #FFBC00;
        color: #fff;
        border-radius: 0;
        width: 100vw;
        height: 100%;
        text-align: center;
        line-height: 88rpx;
        font-size: 36rpx;
    }
    
    .jt {
    	position: absolute;
        width: 6rpx;
        height: 6rpx;
        right: 0rpx;
        top: 40rpx;
        content: '';
        border: 1rpx solid rgb(214 99 18 / 50%);
        border-width: 0 4rpx 4rpx 0;
        padding: 6rpx;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }
</style>
